<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>督查督办</a-breadcrumb-item>
      <a-breadcrumb-item>督查督办</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row>
      <a-col :span="5">
        问题来源：
        <a-select
          v-model="queryForm.issueSource"
          placeholder="请选择问题来源"
          style="marigin-left: 10px"
        >
          <a-select-option
            v-for="item in issueSourceList"
            :key="item.dictLabel"
            :value="item.dictLabel"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-col>
      <!-- <a-col :span="5">
        关联对象：
        <a-select
          v-model="queryForm.relatedObjectId"
          placeholder="请选择关联对象"
          style="width: 130px; marigin-left: 10px"
        >
          <a-select-option
            v-for="item in relatedObjectList"
            :key="item.value"
            :value="item.dictValue"
          >
            {{ item.dictLabel }}
          </a-select-option>
        </a-select>
      </a-col> -->
      <a-col :span="5">
        问题类型：
        <a-select
          v-model="queryForm.issueType"
          placeholder="请选择问题类型："
          style="marigin-left: 10px"
        >
          <a-select-option
            v-for="item in issueTypeList"
            :key="item.dictLabel"
            :value="item.dictLabel"
          >
            {{ item.dictLabel }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="5">
        紧急程度：
        <a-select
          v-model="queryForm.urgencyLevel"
          placeholder="请选择问题等级："
          style="marigin-left: 10px"
        >
          <a-select-option
            v-for="item in urgencyLevelList"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-col>
      <!-- <a-col :span="4">
        事件状态：
        <a-select
          v-model="queryForm.eventStatus"
          placeholder="请选择事件状态："
          style="width: 130px; marigin-left: 10px"
        >
          <a-select-option
            v-for="item in eventStatusList"
            :key="item.value"
            :value="item.dictValue"
          >
            {{ item.dictLabel }}
          </a-select-option>
        </a-select>
      </a-col> -->
      <a-col :span="8">
        时间范围：
        <a-range-picker
          style="width: 250px"
          v-model="creationDateRange"
          :placeholder="['开始日期', '结束日期']"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          :show-time="{
            hideDisabledOptions: true,
            defaultValue: [
              moment('00:00:00', 'HH:mm:ss'),
              moment('23:59:59', 'HH:mm:ss'),
            ],
          }"
          format="YYYY-MM-DD HH:mm:ss"
          @change="changeDate"
        />
      </a-col>
      <a-col :span="4" style="fload:left'">
        <a-button type="primary" @click="search"> 搜索 </a-button>&emsp;&nbsp;
        <a-button @click="handleReset">重置</a-button>
      </a-col>
    </a-row>
    <a-spin :spinning="loading">
      <a-row>
        <a-col :span="24">
          <a-tabs v-model="tabsValue" @change="callback">
            <a-tab-pane
              v-for="item in menuList"
              :key="item.value"
              :tab="item.label"
            >
              <a-table
                :scroll="{ x: 2100 }"
                :columns="columns"
                :data-source="tableData"
                :pagination="false"
                @change="handleTableChange"
              >
              <template slot="eventId" slot-scope="text, record">
                <span
                  style="color: #1890ff; font-weight: 400; font-size: 14px"
                  @click="detailFn(record, 'View')"
                  >{{ text }}
                </span>
              </template>
              <template slot="urgencyLevel" slot-scope="text, record" >
                <span  class="img-item"
                  :class="{
                    'urgency-level': true,
                    'level-0': text == '0',
                    'level-1': text == '1',
                    'level-2': text == '2',
                  }"
                >
                  {{
                    (
                      (urgencyLevelList &&
                        urgencyLevelList.find((item) => item.value == text)) ||
                      {}
                    ).label || ""
                  }}
                  <!-- v-show="text.dubanStatus==1"  -->
                <img v-show="record.dubanStatus == 1" src="https://head-image-1259022270.cos.ap-guangzhou.myqcloud.com/head-image-7797f7c8-b335-4a99-b4fa-f4cba5dc875f督办.png" class="dubanImg">
                </span>

              </template>
                <!-- 操作列 -->
                <template slot="operation" slot-scope="text, record">
                  <a-space>
                    <a class="blue" @click="detailFn(text, 'View')">查看</a>
                    <a-divider type="vertical" v-if="tabsValue == null" />
                    <!-- <a v-hasPermi="['ducha:edit']"
                       class="blue"
                       @click="detailFn(text, 'Edit')">修改</a>
                    <a-divider type="vertical" /> -->
                    <!-- <a
                      v-hasPermi="['ducha:duban']"
                      class="blue"
                      v-if="tabsValue == null"
                      >已督办</a
                    >
                    <a-divider type="vertical" v-if="tabsValue == null" /> -->

                    <a
                      class="blue"
                      @click="handleDo(record, 1)"
                      v-if="tabsValue == null"
                      >督办优先</a
                    >
                    <a-divider type="vertical" v-if="tabsValue == null" />
                    <a
                      class="blue"
                      @click="handleDo(record, 2)"
                      v-if="tabsValue == null"
                      >督办加急</a
                    >
                    <a-divider type="vertical" v-if="tabsValue == 0 || tabsValue == 1 || tabsValue == 2"/>
                    <a
                      v-hasPermi="['ducha:del']"
                      class="red"
                      @click="delFn(text, record)"
                      v-if="tabsValue == 0 || tabsValue == 1 || tabsValue == 2"
                      >删除</a
                    >
                  </a-space>
                </template>
              </a-table>
              <div class="page_box">
                <a-pagination
                  v-model="queryForm.offset"
                  :page-size-options="['20', '30', '40', '50']"
                  :total="total"
                  show-size-changer
                  :page-size="queryForm.current"
                  @showSizeChange="onShowSizeChange"
                  @change="pageChange"
                  :show-total="(total) => `共 ${total} 条`"
                ></a-pagination>
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-col>
      </a-row>
    </a-spin>

    <a-modal
      :visible="dialogVisible"
      cancel-text="取消"
      ok-text="确认"
      title="岗位配置"
      width="38%"
      @cancel="dialogVisible = false"
      @ok="Put"
    >
      <div class="flex mb10">
        <div></div>
      </div>
      <div class="mb10">
        系统将提高该负责人的事件优先级，以达到快速处理的效果。
      </div>
      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="督办建议"
      >
        <a-textarea
          v-model="processDescription"
          placeholder="请输入"
        ></a-textarea>
      </a-form-item>
    </a-modal>
  </div>
</template>
<script>
import { message, Modal } from "ant-design-vue";
import { businessStatusList, urgencyLevelList } from "./common";
import dayjs from "dayjs";
import moment from "moment";
import qs from "qs";
import dictMixin from "@/mixins/dictMixin";
export default {
  mixins: [dictMixin],
  data() {
    return {
      tabsValue: null,
      total: 0,
      tableData: [],
      processDescription: null,
      businessStatusList: businessStatusList,
      questionSourceList: [],
      questionTypeList: [],
      questionLevelList: [],
      eventStatusList: [],
      relatedObjectList: [],
      merchantAddressList: [],
      urgencyLevelList: [
        {
          value: 0,
          label: "一般",
        },
        {
          value: 1,
          label: "优先",
        },
        {
          value: 2,
          label: "紧急",
        },
      ],
      inspectionTypeList: [],
      pageInfo: {},
      columns: [
        {
          title: "事件编号",
          dataIndex: "eventId",
          key: "eventId",
          width:195,
          scopedSlots: { customRender: "eventId" },
          
        },
        {
          title: "问题来源",
          dataIndex: "issueSource",
          key: "issueSource",
          
        },
        {
          title: "问题类型",
          dataIndex: "issueType",
          key: "issueType",
          
        },
        {
          title: "紧急程度",
          dataIndex: "urgencyLevel",
          key: "urgencyLevel",
          width: 150,
          scopedSlots: { customRender: "urgencyLevel" },
        },
        // {
        //   title: "紧急程度",
        //   dataIndex: "urgencyLevel",
        //   key: "urgencyLevel",
          
        //   customRender: (text, record, index) => {
        //     console.log(text);
        //     return (
        //       (this.urgencyLevelList.find((item) => item.value == text) || {})
        //         .label || ""
        //     );
        //   },
        // },
        {
          title: "受理状态",
          dataIndex: "businessStatus",
          key: "businessStatus",
          
          customRender: (text, record, index) => {
            return (
              (this.businessStatusList.find((item) => item.value == text) || {})
                .label || ""
            );
          },
        },
        {
          title: "办理状态",
          dataIndex: "eventStatus",
          key: "eventStatus",
          customRender: (text, record, index) => {
            return (
              (this.dealStatusList.find((item) => item.value == text) || {})
                .label || ""
            );
          },
        },
        {
          title: "关联对象",
          dataIndex: "relatedObjectName",
          key: "relatedObjectName",
          
        },
        {
          title: "案件描述",
          dataIndex: "issueDescription",
          key: "issueDescription",
          
        },
        {
          title: "上报人姓名",
          dataIndex: "reporterName",
          key: "reporterName",
          
        },
        // {
        //   title: "上报人电话",
        //   dataIndex: "reporterPhone",
        //   key: "reporterPhone",
        //   width: "100px",
        // },
        // {
        //   title: "上报时间",
        //   dataIndex: "reportTime",
        //   key: "reportTime",
        //   width: "120px",
        // },
        {
          title: "上报人电话",
          dataIndex: "reporterPhone",
          key: "reporterPhone",
           
        },
        {
          title: "上报时间",
          dataIndex: "reportTime",
          key: "reportTime",
           
        },
        {
          title: "操作",
          key: "operation",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      menuList: [
        { label: "全部", value: null },
        { label: "待办", value: 0 },
        { label: "超期", value: 1 },
        { label: "完成", value: 2 },
      ],
      sourceList: [],
      inspectTypeList: [],
      moveList: [
        { label: "专项行动", value: 0 },
        { label: "联合行动", value: 1 },
      ],
      statusList: [
        {
          value: "0",
          label: "无状态",
        },
        {
          value: "1",
          label: "已上报",
        },
        {
          value: "2",
          label: "已转交",
        },
        {
          value: "3",
          label: "处理中",
        },
        {
          value: "4",
          label: "不处理",
        },
        {
          value: "5",
          label: "已处理",
        },
      ],
      loading: true,
      creationDateRange: [],
      queryForm: {
        current: 20,
        offset: 1,
        issueSource: null,
        relatedObjectId: null,
        issueType: null,
        urgencyLevel: null,
        eventStatus: null,
        reportStartTime: null,
        reportEndTime: null,
        flag: null,
      },
      dialogVisible: false,
      id: null,
      formItemLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19 },
      },
      formTailLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19, offset: 4 },
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    moment,
    // 分页
    onShowSizeChange(current, pageSize) {
      // console.log('-----',offset)
      this.queryForm.offset = current;
      this.queryForm.current = pageSize;
      // this.getList()
      if (this.tabsValue) {
        this.getList();
      } else {
        this.getAllList();
      }
    },
    pageChange(current) {
      this.queryForm.offset = current;
      // this.getList()
      if (this.tabsValue) {
        this.getList();
      } else {
        this.getAllList();
      }
    },
    // 处理表格变化
    handleTableChange(pag) {
      // this.queryForm.current = pag.current;
      // 加载新数据
    },
    async init() {
      this.getDictData({
        code: "QUESTION_SOURCE_CODE", // 问题来源
        name: "issueSourceList",
      });
      this.getDictData({
        code: "QUESTION_TYPE_CODE", // 问题类型
        name: "issueTypeList",
      });
      await this.getDict3();
      await this.getDict4();
      await this.getDict5();
      await this.getDict6();
      await this.getDict7();
      await this.getAllList();
    },
    changeDate(val) {
      this.queryForm.startTime = val[0];
      this.queryForm.endTime = val[1];
    },
    isDisabled(text) {
      return ["PRIORITY", "URGENT"].includes(text);
    },
    handleReset() {
      this.queryForm = {
        current: 20,
        offset: 1,
        issueSource: null,
        relatedObjectId: null,
        issueType: null,
        urgencyLevel: null,
        eventStatus: null,
        startTime: null,
        endTime: null,
        flag: null,
      };
      this.creationDateRange = [];
      if (this.tabsValue) {
        this.getList();
      } else {
        this.getAllList();
      }
      // this.getList()
    },

    search() {
      this.queryForm.offset = 1;
      if (this.tabsValue) {
        this.getList();
      } else {
        this.getAllList();
      }
    },
    getList() {
      this.loading = true;
      const url = "/government-platform-center/case/getAllDubanCaseNoExce";
      this.$axios
        .post(url, this.queryForm, {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.tableData = res.data.data || [];
            this.total = res.data.total;
            this.loading = false;
          }
        });
    },
    getAllList() {
      this.loading = true;
      // let data = qs.stringify(this.queryForm)
      this.$axios
        .post(
          `/government-platform-center/case/getAllDubanCase`,
          this.queryForm,
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          }
        )
        .then((res) => {
          if (res.data.code === 0) {
            this.tableData = res.data.data || [];
            this.total = res.data.total || 0;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    callback(e) {
      this.tabsValue = e;
      if (e || e == 0) {
        this.queryForm.flag = e;
        this.getList();
      } else {
        this.getAllList();
      }
    },
    detailFn(text, type) {
      this.$router.push({
        path: "/duban/sjdetail",
        query: {
          id: text.eventId,
          operationType: "Detail",
          pageType: "Ducha",
          // paramId: row[this.pageData.paramId],
        },
      });
    },
    delFn(text) {
      const that = this;
      Modal.confirm({
        title: "确认删除",
        content: "您确定要删除这项内容吗？",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          const url = `/government-platform-center/case/delDuban`;
          that.$axios.post(url,{dubanId:text.dubanId}, {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        }).then((res) => {
            if (res.data.code == 0) {
              that.getList();
              message.success("操作成功");
            }
          });
        },
        onCancel() {
          // 在此处理取消逻辑
          console.log("删除已取消");
        },
      });
    },
    CloseFn(text) {
      this.eventId = text.eventId;
      this.dialogVisible = true;
    },
    // 督办
    async handleDo(row, type) {
      const url = `/government-platform-center/case/setEmergency?eventId=${row.eventId}&status=${type}`;
      await this.$axios.post(url).then((res) => {
        this.getAllList();
      });
    },
    Put() {
      if (!this.processDescription) {
        return;
      }
      const form = {
        eventId: this.eventId,
        processDescription: this.processDescription,
      };
      const url =
        "/government-platform-center/xunjian/patrolInspection/directlyClose";
      this.$axios.post(url, form).then((res) => {
        if (res.data.code == 0) {
          this.dialogVisible = false;
          this.getList();
          message.success("操作成功");
        }
      });
    },
    formatData(data) {
      return data.map((ele) => {
        return {
          ...ele,
          value: ele.dictValue,
          label: ele.dictLabel,
        };
      });
    },
    //字典
    //问题来源
    //关联对象
    async getDict3() {
      this.loading = true;
      const url1 =
        "government-platform-center/dictData/queryByCode?dictType=yichan_code";
      const res1 = await this.$axios.get(url1);
      const url2 =
        "government-platform-center/dictData/queryByCode?dictType=merchant_code";
      const res2 = await this.$axios.get(url2);
      if (res1.data.code == 0 && res2.data.code == 0) {
        let data = [...res1.data.data, ...res2.data.data];
        this.relatedObjectList = this.formatData(data);
      }
    },
    //问题等级
    async getDict4() {
      this.loading = true;
      const url =
        "government-platform-center/dictData/queryByCode?dictType=QUESTION_LEVE_CODE";
      const res = await this.$axios.get(url);
      if (res.data.code == 0) {
        this.questionLevelList = this.formatData(res.data.data);
      }
    },
    //事件状态
    async getDict5() {
      this.loading = true;
      const url =
        "government-platform-center/dictData/queryByCode?dictType=EVENT_STATUS";
      const res = await this.$axios.get(url);
      if (res.data.code == 0) {
        this.eventStatusList = this.formatData(res.data.data);
      }
    },
    //巡查类型
    async getDict6() {
      this.loading = true;
      const url =
        "government-platform-center/dictData/queryByCode?dictType=INSPECTION_TYPE_CODE";
      const res = await this.$axios.get(url);
      if (res.data.code == 0) {
        this.inspectionTypeList = this.formatData(res.data.data);
      }
    },
    //商家位置
    async getDict7() {
      // this.loading = true
      // const url =
      //   'government-platform-center/dictData/queryByCode?dictType=MERCHANT_LOCATION_CODE'
      // const res = await this.$axios.get(url)
      // if (res.data.code == 0) {
      //   this.merchantAddressList = this.formatData(res.data.data)
      // }
    },
    getName(id, list) {
      let name = "";
      list.forEach((item) => {
        if (id == item.dictValue) {
          name = item.dictLabel;
        }
      });
      return name;
    },
  },
};
</script>
<style lang="scss" scoped>
.ant-row {
  border-radius: 5px;
  margin-bottom: 15px;
  background: #fff;
  padding: 20px;
  color: #000;
}

::v-deep .ant-table-thead > tr > th {
  color: #000;
  font-weight: bold;
}

::v-deep .ant-table-tbody > tr > td {
  color: #000;
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

/* 添加表格原生滚动条样式 */
::v-deep .ant-table-body {
  overflow-x: auto !important;
  /* overflow-y: auto !important; */
  /* max-height: 500px; 设置最大高度，超出时显示垂直滚动条 */
}

/* 确保使用原生滚动条样式 */
::v-deep .ant-table-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::v-deep .ant-table-body::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 4px;
}

::v-deep .ant-table-body::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 修复固定列的问题 */
::v-deep .ant-table-fixed-right {
  right: 0px; /* 为滚动条留出空间 */
}
.dubanImg{
  width: 25px;
  height: 25px;
  display: inline-block;
  position: absolute;
  top: -2px;
  right: -28px;
}
.img-item{
  position: relative;
}
.urgency-level {
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;

  &.level-0 {
    background-color: #1890ff;
    color: #fff;
  }

  &.level-1 {
    background-color: #f7f588;
    color: #000;
  }

  &.level-2 {
    background-color: #ff4d4f;
    color: #fff;
  }
}
</style>
